<template>
	<div class="wrapper">
		<div class="item" v-for="(msg,index) of systemMsgList" :key="index" @click="toSystemMsg(msg.id)">
			<div class="item-time">{{msg.created_at}}</div>
			<div class="item-logo">
				<image :src="msg.photo_url" alt="" mode="widthFix"></image>
			</div>
			<div class="item-content">
				<div class="tit">{{msg.title}}</div>
				<div class="content">{{msg.desc}}</div>
				<image :src="msg.thumb_url" mode="aspectFill" class="thumb-img" v-if="msg.thumb_url"></image>
			</div>
		</div>
	</div>
</template>

<script>
	let defaultJpg=require('../../../../static/img/quan-active.png');
	let defaultBanner=require('../../../../static/img/123.jpg')
	export default {
		data() {
			return {
				defaultJpg:defaultJpg,
				defaultBanner:defaultBanner
			};
		},
		props:{
			systemMsgList:{
				type:Array,
				default:function(){
					return []
				}
			}
		},
		methods:{
			toSystemMsg(id){
				uni.navigateTo({
					url:`/pages/notice/systemMsg/systemMsg?msgId=${id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '~@/static/scss/mixin.scss';
	.wrapper{
		width: 100%;
		min-height: 100vh;
		background:rgba(241,244,247,1);
		.item{
			padding:30rpx 0;
			@include flexWrap(center,flex-start);
			.item-time{
				color:#8B8D93;
				width:100%;
				margin-bottom: 20rpx;
				text-align: center;
				
			}
			.item-logo{
				margin:0 20rpx;
				image{
					width:90rpx;
					height: 90rpx;
					border-radius: 50%;
				}
			}
			.item-content{
				background: #fff;
				width: 80vw;
				padding:20rpx;
				border-radius: 10rpx;
				.tit{
					font-size: 30rpx;
					font-weight: 500;
					line-height: 42rpx;
				}
				.content{
					margin:20rpx 0;
					color:#8B8D93;
					font-size:26rpx;
					color:rgba(139,141,147,1);
					line-height: 36rpx;
				}
				.thumb-img{
					width: 100%;
					height: 200rpx;
				}
				.more{
					color:#8B8D93;
					margin-top:20rpx;
				}
			}
		}
	}
</style>
